<template>
  <div class="page-vscode-menu">
    <Tree :data="menuData" :load-data="loadData" @on-select-change="selectMenu"></Tree>
  </div>
</template>

<script>
import { getDirFilesInfo, preview } from 'http/api/file';
export default {
  props: ['defaultExpandFilePath'],
  watch: {
    defaultExpandFilePath (newFile) {
      this.setSelectNode(newFile);
    }
  },
  data () {
    return {
      menuData: []
    };
  },
  methods: {
    // 初始化目录
    getMenu () {
      getDirFilesInfo({
        currentDir: '/',
        currentPage: 1,
        pageSize: 500,
        keyWord: ''
      }).then(res => {
        if (res) {
          let { fileAttributes } = res;
          this.menuData = this.setTreeData(fileAttributes);
        }
      });
    },

    // 设置树数据
    setTreeData (datas) {
      let treeData = [];
      datas.forEach(item => {
        let obj = {
          title: item.name,
          fullFileName: item.fullFileName,
          selected: false,
          expand: false
        };

        if (item.directory) {
          obj.loading = false;
          obj.children = [];
        }

        treeData.push(obj);
      });

      if (treeData.length === 0) {
        treeData.push({
          title: '暂无数据'
        });
      }

      return treeData;
    },

    // 加载数据
    loadData (item, callback) {
      getDirFilesInfo({
        currentDir: item.fullFileName,
        currentPage: 1,
        pageSize: 500,
        keyWord: ''
      }).then(res => {
        if (res) {
          let { fileAttributes } = res;
          callback(this.setTreeData(fileAttributes));
        }
      });
    },

    // 选择一个目录
    selectMenu (nodes, item) {
      if (item.loading === false) {
        this.$emit('setValue', {
          fullFileName: '',
          data: ''
        });
        return;
      }

      let { fullFileName } = item;

      if (!fullFileName) {
        this.$emit('setValue', {
          fullFileName: '',
          data: ''
        });
        return;
      }

      preview({
        fullFileName
      }).then(res => {
        if (res) {
          this.$emit('setValue', {
            fullFileName,
            data: res.data
          });
        }
      });
    },

    // 全部重置false
    checkFalse (data, nodeName) {
      data.forEach((item, index) => {
        item.selected = false;
        item.expand = false;
        if (item.fullFileName === nodeName) {
          item.selected = true;
        }

        if (item.children && item.children.length > 0) {
          this.checkFalse(item.children, nodeName);
        }
      });
    },

    // 设置选中
    setSelectNode (nodeName) {
      let arr = nodeName.split('/');
      if (!arr[0]) {
        arr.shift();
      }
      // 第一层目录，完全匹配
      this.checkFalse(this.menuData, nodeName);

      // 不止一个目录
      if (arr.length > 1) {
        this.getMoreData(arr);
      }
    },

    // 请求数据 + 设置expand
    getMoreData (arr, menu, lastFile) {
      let file = (lastFile || '') + '/' + arr[0];
      arr.shift();

      this.getExpandSelectedNode(file, arr, menu);
    },

    // 获取数据并塞入数据
    getExpandSelectedNode (file, arr, menu) {
      menu = menu || this.menuData;

      for (let i = 0, len = menu.length; i < len; i++) {
        let item = menu[i];
        if (item.fullFileName === file) {
          if (arr.length === 0) {
            item.selected = true;
            break;
          } else {
            item.expand = true;
            getDirFilesInfo({
              currentDir: file,
              currentPage: 1,
              pageSize: 500,
              keyWord: ''
            }).then(res => {
              if (res) {
                let { fileAttributes } = res;
                item.children = this.setTreeData(fileAttributes);
                this.getMoreData(arr, item.children, file);
              }
            });
            break;
          }
        }
      }
    }
  },
  mounted () {
    this.getMenu();
  }
};
</script>

<style rel="stylesheet/less" lang="less" scoped>
.page-vscode-menu {
  float: left;
  width: 250px;
  height: calc(100% - 40px);
  min-height: 250px;
  overflow-y: auto;
  background: #232324;
  padding-left: 10px;
  box-sizing: border-box;
}
</style>

<style lang="less">
.page-vscode-menu {
  .ivu-tree-title {
    color: #bcbcbc;
    font-size: 13px;
  }
  .ivu-tree-title:hover {
    background: #27292a;
  }
  .ivu-tree-title-selected,
  .ivu-tree-title-selected:hover {
    background: #194168;
    color: #ffffff;
  }
}
</style>
